<%@ page language="java"  contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="rapid" uri="http://www.rapid-framework.org.cn/rapid" %>

<rapid:override name="breadcrumb">
    <!--面包屑导航-->
    <nav class="breadcrumb">
        <a class="crumbs" href="/">  <i class="fa fa-home"></i>首页  </a>
        <c:choose>
            <c:when test="${article.categoryList != null && article.categoryList.size() > 0}">
                <c:forEach items="${article.categoryList}" var="c">
                    <i class="fa fa-angle-right"></i>
                    <a href="/category/${c.categoryId}">    ${c.categoryName} </a>
                </c:forEach>
            </c:when>
            <c:otherwise>
                <i class="fa fa-angle-right"></i>
                <a>未分类</a>
            </c:otherwise>
        </c:choose>
        <i class="fa fa-angle-right"></i>
        正文
    </nav>

</rapid:override>

<rapid:override name="left">
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
			<article class="post" id="articleDetail" data-id="${article.articleId}">
				<header class="entry-header">
					<h1 class="entry-title">   ${article.articleTitle}</h1>
				</header>
				<!-- .entry-header -->
				<div class="entry-content">                   
				    <%--==================================================================================================================== --%>
					<footer class="single-footer">
						<ul class="single-meta">
							<li class="comment">
								<a href="/article/${article.articleId}#comments"rel="external nofollow" title="${commentList.size() } 条评论数"> 
									<i class="fa fa-comment-o"></i> 
									<i	class="comment-count">${commentList.size()}</i>
								</a>
							</li>
							<li class="views">
								<i class="fa fa-eye"></i> 
								<span class="articleViewCount">${article.articleViewCount}</span> views</li>
								
							<li class="r-hide">
								<a href="javascript:pr()" title="侧边栏">
									<i class="fa fa-caret-left"></i>
									<i class="fa fa-caret-right"></i>
								</a>
							</li>
						</ul>
						<ul id="fontsize">
							<li>A+</li>
						</ul>
						<div class="single-cat-tag">
							<div class="single-cat">
								所属分类： <a href="/category/${article.categoryList[0].categoryId}"> ${article.categoryList[0].categoryName}</a> 
								<a href="/category/${article.categoryList[1].categoryId}">${article.categoryList[1].categoryName}</a>
							</div>
						</div>
					</footer>
					 <%--==================================================================================================================== --%>
					
					<div class="single-content">
						 ${article.articleContent}
					</div>
					<div class="s-weixin">
						<ul class="weimg1">
							<li><strong>微信</strong></li>
							<li>赶快加我聊天吧</li>
							<li><img src="/resources/img/weixin.jpg"></li>
						</ul>
						<ul class="weimg2">
							<li><strong>博客交流群</strong></li>
							<li>海纳百川，大家来水</li>
							<li><img src="/resources/img/qqGroup.jpg" alt="weinxin"></li>
						</ul>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
					<div id="social">
						<div class="social-main">
							<span class="like"> 
								<a href="javascript:;" data-action="ding" data-id="1" title="点赞" class="favorite"onclick="increaseLikeCount(${article.articleId})">
									 <i class="fa fa-thumbs-up"></i>赞
									 <i class="count" id="count-${article.articleId}">${article.articleLikeCount}</i>
								</a>
							</span>
							<div class="shang-p">
								<div class="shang-empty">
									<span></span>
								</div>
								<span class="shang-s"> <a
									onclick="PaymentUtils.show();" style="cursor: pointer">赏</a>
								</span>
							</div>
							<div class="share-sd">
								<span class="share-s" style="margin-top: 25px !important;">
									<a href="javascript:void(0)" id="share-s" title="分享"> <i
										class="fa fa-share-alt"></i>分享
								</a>
								</span>
								<div id="share">
									<ul class="bdsharebuttonbox bdshare-button-style1-16"
										data-bd-bind="11122211111">
										<li><a title="更多" class="bds_more fa fa-plus-square"
											data-cmd="more" onclick="return false;" href="#"></a></li>
										<li><a title="分享到QQ空间3" class="fa fa-qq"
											data-cmd="qzone" onclick="return false;" href="#"></a></li>
										<li><a title="分享到新浪微博5" class="fa fa-weibo"
											data-cmd="tsina" onclick="return false;" href="#"></a></li>
										<li><a title="分享到腾讯微博7" class="fa fa-pinterest-square"
											data-cmd="tqq" onclick="return false;" href="#"></a></li>
										<li><a title="分享到人人网8" class="fa fa-renren"
											data-cmd="renren" onclick="return false;" href="#"></a></li>
										<li><a title="分享到微信8" class="fa fa-weixin"
											data-cmd="weixin" onclick="return false;" href="#"></a></li>
									</ul>
								</div>
							</div>
							<div class="clear"></div>
						</div>
					</div>

					<div class="clear"></div>
				</div>
				<!-- .entry-content -->
			</article>
			<!-- #post -->

  			<%--所属标签 --%>
			<div class="single-tag">
				<ul class="" data-wow-delay="0.3s">
					    <c:forEach items="${article.tagList}" var="t">
                        <li>
                            <a href="/tag/${t.tagId}" rel="tag"   style="background:#666666"> ${t.tagName}  </a>
                        </li>
                    </c:forEach>
				</ul>
			</div>
			
			
			<div class="authorbio wow fadeInUp">
				<img alt="${article.user.userNickname}" src="/user/photo/${article.user.userId}"
					class="avatar avatar-64 photo" height="64" width="64">
				<ul class="postinfo">
					<li></li>
					<li>
						<strong>版权声明：</strong>本站原创文章，于<fmt:formatDate value="${article.articleCreateTime}" pattern="yyyy-MM-dd"/>
                          	 ，由 <strong>${article.user.userNickname}</strong> 发表。</li>
						
					<li class="reprinted"><strong>转载请注明：</strong> <a
						href="/article/${article.articleId}" rel="bookmark" title="本文固定链接 /article/${article.articleId}">
							 ${article.articleTitle} |  ${options.optionSiteTitle}</a></li>
				</ul>
				<div class="clear"></div>
			</div>
			<div id="single-widget">
				<div class="wow fadeInUp" data-wow-delay="0.3s">
					<aside id="related_post-2" class="widget">
						<h3 class="widget-title">
							<span class="s-icon"></span>相关文章
						</h3>
						<div id="related_post_widget">
							<ul>
							 	<c:forEach items="${similarArticleList}" var="s">
                                    <li>
                                        <a href="/article/${s.articleId}">${s.articleTitle}</a>
                                    </li>
                                </c:forEach>
							</ul>
						</div>
						<div class="clear"></div>
					</aside>
					<aside id="hot_post-8" class="widget hot_post">
						<h3 class="widget-title">
							<span class="s-icon"></span>猜你喜欢
						</h3>
						<div id="hot_post_widget">
							<ul>
							 	<c:forEach items="${mostViewArticleList}" var="m">
                                    <li>
                                        <a href="/article/${m.articleId}">   ${m.articleTitle}  </a>
                                    </li>
                                </c:forEach>
							</ul>
						</div>
						<div class="clear"></div>
					</aside>
				</div>
				<div class="clear"></div>
			</div>
			
			<%--================================上一篇 下一篇==================================== --%>
			<nav class="nav-single">
			    <c:choose>
                    <c:when test="${preArticle!=null}">
                        <a href="/article/${preArticle.articleId}" rel="next">
                            <span class="meta-nav">
                                <span class="post-nav">上一篇
                                 <i class="fa fa-angle-left"></i>
                                </span>
                                <br>${preArticle.articleTitle}aa
                            </span>
                        </a>
                    </c:when>
                    <c:otherwise>
                              <span class="meta-nav">
                                    <span class="post-nav">
                                       	 没有了<br>
                                    </span>已是第一篇文章
                                </span>
                    </c:otherwise>
                </c:choose>
                
  				<c:choose>
                    <c:when test="${afterArticle!=null}">
                        <a href="/article/${afterArticle.articleId}" rel="next">
                            <span class="meta-nav">
                                <span class="post-nav">下一篇
                                 <i class="fa fa-angle-right"></i>
                                </span>
                                <br>${afterArticle.articleTitle}bb
                            </span>
                        </a>
                    </c:when>
                    <c:otherwise>
                            <span class="meta-nav">
                                <span class="post-nav">
                                  	  没有了<br>
                                </span>已是最后文章
                             </span>
                    </c:otherwise>
                </c:choose>
                
				<div class="clear"></div>
			</nav>
			<%--=================================================================================== --%>
				
			<div class="scroll-comments"></div>
			<div id="comments" class="comments-area">
				<div id="respond" class="comment-respond">
					<h3 id="reply-title" class="comment-reply-title">
						<span id="reply-title-word">发表评论</span> 
						<a rel="nofollow" id="cancel-comment-reply-link" href="/article/65#respond" style="">取消回复</a>
					</h3>
					
					<!-- 注意,这个表单没有action属性,是因为它是用ajax方式提交的 ,但后来应该是改成了表单交-->
					<form action="/comment" id="comment_form" method="post" onsubmit="return confirm('确定提交吗')">
						<p class="comment-form-comment">
							<textarea id="comment" name="commentContent" rows="4" 	tabindex="1" required></textarea>
						</p>
						<div id="comment-author-info">
							<input type="hidden" name="commentPid" value="0"> 
							<input type="hidden" name="commentPname" value="">
							<input type="hidden" name="commentRole" value="0">
							
							<p class="comment-form-author">
								<label for="author_name"> 昵称<span class="required">*</span> </label>
								 <input type="text" name="commentAuthorName" id="author_name" class="" value="" tabindex="2" required>
							</p>
							<p class="comment-form-email">
								<label for="author_email"> 邮箱<span class="required">*</span>
								</label> <input type="email" name="commentAuthorEmail" id="author_email" class="" value="" tabindex="3" required>
							</p>
							<p class="comment-form-url">
								<label for="author_url">网址</label> 
								<input type="url"name="commentAuthorUrl" id="author_url" class="" value="" tabindex="4">
							</p>
						</div>
						<div class="clear"></div>
						
						<p class="form-submit">
							 <input id="submit" name="submit" type="submit" tabindex="5"	value="提交评论">
							 <input type="hidden" 	name="commentArticleId" value="${article.articleId }" id="article_id"> 
							 <input type="hidden" name="commentPid" id="comment_pid" value="0">
						</p>
					</form>
				</div>

				<%--=======================================回复 =======================================================  --%>
				<ol class="comment-list">
					 <c:set var="floor" value="0"/>
					<li class="comments-anchor">
						<ul id="anchor-comment-${c.commentId}"></ul>
					</li>
					
					<c:forEach var="c" items="${commentList}" >
						<c:if test="${c.commentPid == 0}">
					            <c:set var="floor" value="${floor + 1}"/>
	                            <li class="comments-anchor">
	                                <ul id="anchor-comment-${c.commentId}"></ul>
	                            </li>
								<li class="comment">
									<div id="div-comment-${c.commentId}" class="comment-body">
										<div class="comment-author vcard">
											<img class="avatar" src="${c.commentAuthorAvatar}" 	alt="avatar" style="display: block;"> 
											<strong>${c.commentAuthorName}</strong>
											<i class="fa fa-black-tie" style="color: #c40000;"></i>
											<span class=""	style="margin-top: 2px !important; color: #c40000; font-size: 13px;"><b>博主</b></span>
											<span class="comment-meta commentmetadata"> 
												<span class="ua-info" style="display: inline;"> <br>
													 <span class="comment-aux"> 
														<span class="reply"> 
															<a 	rel="nofollow" class="comment-reply-link" href="#respond" 	onclick="replyComment(this)">回复 </a>
														</span> 
														<fmt:formatDate value="${c.commentCreateTime}" pattern="yyyy年MM月dd日 HH:mm:ss"/>&nbsp;
														<span class="floor">&nbsp;${floor}楼   </span>
													 </span>
												</span>
											</span>
											<p>  
												<c:if test="${c.commentPid!=0}">
		                                            <span class="at">@ ${c.commentPname}</span>
		                                        </c:if>
		                                        ${c.commentContent}
		                                     </p>
										</div>
									</div>
									<ul class="children">
		                                    <c:set var="floor2" value="0"/>
		                                    <c:forEach items="${commentList}" var="c2">
		                                        <c:if test="${c.commentId == c2.commentPid}">
		                                            <c:set var="floor2" value="${floor2+1}"/>
		                                            <li class="comments-anchor">
		                                                <ul id="anchor-comment-${c2.commentId}"></ul>
		                                            </li>
		                                            <li class="comment">
		                                                <div id="div-comment-${c.commentId}" class="comment-body">
		                                                    <div class="comment-author vcard">
		                                                        <img class="avatar" src="${c2.commentAuthorAvatar}" alt="avatar"
		                                                             style="display: block;">
		                                                        <strong>${c2.commentAuthorName} </strong>
		                                                        <c:if test="${c2.commentRole==1}">
		                                                            <i class="fa fa-black-tie" style="color: #c40000;"></i>
		                                                            <span class=""
		                                                                  style="margin-top: 2px!important;color: #c40000;font-size: 13px;;"><b>博主</b></span>
		                                                        </c:if>
		                                                        <span class="comment-meta">
		                                                    <span class="ua-info" style="display: inline;">
		                                                    <br>
		                                                    <span class="comment-aux">
		                                                        <span class="reply">
		                                                            <a rel="nofollow" class="comment-reply-link" href="#respond"
		                                                               onclick="replyComment()">回复
		                                                            </a>
		                                                        </span>
		                                                        <fmt:formatDate value="${c2.commentCreateTime}"   pattern="yyyy年MM月dd日 HH:mm:ss"/>&nbsp;
		                                                        <span class="floor"> &nbsp;${floor2}层 </span>
		                                                    </span>
		                                                </span>
		                                                    </span>
		                                                        <p>
		                                                            <c:if test="${c2.commentPid!=0}">
		                                                                <c:if test="${c2.commentPid!=0}">
		                                                                    <span class="at">@ ${c2.commentPname}</span>
		                                                                </c:if>
		                                                                ${c2.commentContent}
		                                                            </c:if>
		                                                        </p>
		                                                    </div>
		                                                </div>
		                                            </li>
		                                        </c:if>
		                                    </c:forEach>
									</ul>
								</li>
						</c:if>
					</c:forEach>
				</ol>
			    <%--=======================================上面是回复 =======================================================  --%>
		
			</div>
		</main>
		<!-- .site-main -->
	</div>
</rapid:override>


<rapid:override name="right">
    <%@include file="../Public/right-1.jsp" %>
</rapid:override>

<rapid:override name="frame-footer-script">
    <script src="/resources/js/jquery.cookie.js"></script>
    
        <script type="text/javascript">
        
        $(function(){
        	//  var articleId = $("#articleDetail").attr("data-id");
              increaseViewCount('${article.articleId}');	
        });
        
        /*
        $(document).ready(function () {
            if ($('#author_name').val() == '') {
                var author = localStorage.getItem("author");
                $("#author_name").val(author == 'undefined' ? '' : author);
            }
            if ($('#author_email').val() == '') {
                var email = localStorage.getItem("email");
                $("#author_email").val(email == 'undefined' ? '' : email);
            }
            if ($('#author_url').val() == '') {
                var url = localStorage.getItem("url");
                $("#author_url").val(url == 'undefined' ? '' : url);
            }
        });

        var articleId = $("#articleDetail").attr("data-id");
        increaseViewCount(articleId);
        layui.code({
            elem: 'pre',//默认值为.layui-code
            // skin: 'notepad', //如果要默认风格，不用设定该key。
            about: false
        });
        
        */
        
        
       //文章浏览量+1
        function increaseViewCount(articleId) {
            if ($.cookie("viewId") != articleId || $.cookie("viewId") == null) {
                $.ajax({
                    async: false,
                    type: "POST",
                    url: "/article/view/" + articleId,
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (data) {
                        $(".articleViewCount").html(data);
                        $.cookie(
                            "viewId",
                            articleId,//往cookie中写入的内容
                            {
                                "path": "/", //cookie的默认属性
                            }
                        );
                    },
                    error: function () {
                      //  alert("获取数据出错!");
                    },
                });
            }
        }
        
        
      //点赞+1
        function increaseLikeCount(articleId) {	
            if ($.cookie("likeId") != articleId || $.cookie("likeId") == null) {
                $.ajax({
                    async: false,
                    type: "POST",
                    url: "/article/like/" + articleId,
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (data) {
                        $(".count").html(data);
                        $.cookie(
                            "likeId",
                            articleId,//往cookie中写入的内容
                            {
                                "path": "/", //cookie的默认属性
                            }
                        );
                    },
                    error: function () {
                      //  alert("获取数据出错!");
                    },
                });
            }
            
            else{
            	alert("已赞过了");
            }
        }

      /*
      $(function(){
    	  //提交评论信息
          $("#comment_form").submit(function () {
              $.ajax({
                  async: false,
                  type: "POST",
                  url: '/comment',
                  contentType: "application/x-www-form-urlencoded; charset=utf-8",
                  data: $("#comment_form").serialize(),
                  success: function (data) {
                      if (data.code == 0) {
                          layer.msg("评论成功！");
                          localStorage.setItem('author', $("#author_name").val());
                          localStorage.setItem('email', $("#author_email").val());
                          localStorage.setItem('url', $("#author_url").val());
                          window.setTimeout("window.location.reload()", 2000);
                          return false;
                      } else {
                          layer.msg(data.msg);
                      }

                  },
                  error: function () {
                  }
              })
              return false;
          }) 
      });*/
      
      
      var msg="${msg}";
      if(msg!=""){
    	  alert(msg);
      }
      
      
    

    //点击了评论
    function replyComment(item){
    		alert("fuckdog");
    	 var authorName = item.parents('.comment-author').find("strong").text();
         $("#cancel-comment-reply-link").show();
         $("#reply-title-word").html("回复 " + authorName);
         var commentId = item.parents('.comment-body').attr("id").match(/\d+/g);
         $("input[name=commentPid]").attr("value", commentId);
         $("input[name=commentPname]").attr("value", authorName);
         $("#comment").attr("placeholder", "@ " + authorName)
    }
  

    $("#cancel-comment-reply-link").click(function () {
        $("#cancel-comment-reply-link").hide();
        $("input[name=commentPid]").attr("value", 0);
        $("input[name=commentPname]").attr("value", "");
        $("#reply-title-word").html("发表评论");
    })
  
    </script>
    
    
  
 </rapid:override>
 
 <%--
    关于jquery cookie的使用:
    $.cookie('the_cookie', 'the_value');
           添加一个"会话cookie" 没有有指明 cookie有效时间，效期到用户关闭浏览器，称为会话cookie（session cookie）
           
     $.cookie('the_cookie', 'the_value', { expires: 7 });
          创建一个cookie,且有效期为7天
          
     $.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });
         创建一个cookie并设置 cookie的有效路径
 --%>



<%@ include file="../Public/framework.jsp" %>